/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 下属驿站详情
 *  */
import React, { useEffect, useState, useCallback } from "react";
import PageHeaderLayout from "@/layouts/PageHeaderLayout";
import { List, Row, Col, Button, message } from "antd";
import { isEmpty } from "lodash";
import { connect } from "dva";
import router from "umi/router";
import ModifyZYModal from "@/components/AreaList/ModifyZYModal";
import styles from "./style.less";

const PostDetail = ({ dispatch, routerInfo, loading, businessInfoMap, baseInfoMap }) => {
  const [detailInfo, setDetailInfo] = useState({ baseInfo: {}, businessInfo: {} });
  const [visible, setVisible] = useState(false);

  const getInfo = useCallback(
    () => {
      const { query = {} } = routerInfo.location;
      const { cm_id } = query;
      if (!cm_id) {
        message.error("暂无该驿站信息！");
        return;
      }
      dispatch({
        type: "area/getPostInfo",
        payload: {
          cm_id,
          status: 1,
        },
      })
        .then((res = {}) => {
          const { baseInfo, businessInfo } = res;
          setDetailInfo(prevState => ({
            ...prevState,
            baseInfo,
            businessInfo: {
              ...businessInfo,
              cm_id,
            },
          }));
        })
        .catch(() => {
          setDetailInfo({ baseInfo: {}, businessInfo: {} });
        });
    },
    [dispatch]
  );

  useEffect(
    () => {
      getInfo();
    },
    [getInfo]
  );

  return (
    <PageHeaderLayout title="驿站详情">
      <div className={styles.main}>
        <Row
          type="flex"
          style={{ width: "100%", marginTop: 10, marginBottom: 10 }}
          justify="space-between"
        >
          <Col>
            <h3>基础信息</h3>
          </Col>
          <Col>
            <Button type="primary" onClick={() => router.goBack()}>
              返回
            </Button>
          </Col>
        </Row>
        <List
          loading={loading}
          bordered
          dataSource={baseInfoMap}
          renderItem={item => (
            <List.Item>
              <Row type="flex" style={{ width: "100%" }}>
                <Col xs={12} sm={6} md={4} lg={4} xl={4} xxl={3}>
                  <Row type="flex" justify="space-between">
                    <Col>{item.title}</Col>
                    <Col>：</Col>
                  </Row>
                </Col>
                <Col>{detailInfo.baseInfo[item.key] || "-"}</Col>
              </Row>
            </List.Item>
          )}
        />
        <Row
          type="flex"
          style={{ width: "100%", marginTop: 10, marginBottom: 10 }}
          justify="space-between"
        >
          <Col>
            <h3>经营信息</h3>
          </Col>
          <Col>
            <Button
              type="primary"
              onClick={() => setVisible(true)}
              disabled={isEmpty(detailInfo.businessInfo)}
            >
              修改
            </Button>
          </Col>
        </Row>
        <List
          bordered
          loading={loading}
          dataSource={businessInfoMap}
          renderItem={item => (
            <List.Item>
              <Row type="flex" style={{ width: "100%" }}>
                <Col xs={12} sm={6} md={4} lg={4} xl={4} xxl={3}>
                  <Row type="flex" justify="space-between">
                    <Col>{item.title}</Col>
                    <Col>：</Col>
                  </Row>
                </Col>
                <Col>{detailInfo.businessInfo[item.key] || "-"}</Col>
              </Row>
            </List.Item>
          )}
        />
      </div>
      <ModifyZYModal
        visible={visible}
        record={detailInfo.businessInfo}
        showModal={() => setVisible(!visible)}
        getList={getInfo}
      />
    </PageHeaderLayout>
  );
};

export default connect(({ router: routerInfo, loading, area }) => ({
  routerInfo,
  baseInfoMap: area.baseInfoMap,
  businessInfoMap: area.businessInfoMap,
  loading: loading.effects["area/getPostInfo"],
}))(React.memo(PostDetail));
